<template>
  <el-card :border="false">
    <el-table :data="tableData" border style="width: 100%;" v-loading="loading">
      <el-table-column label="容器ID" prop="ID" />
      <el-table-column label="CPU使用率" prop="CPUPerc" />
      <el-table-column label="内存占比" prop="MemPerc" />
      <el-table-column label="占用内存 / 总内存" prop="MemUsage" />
      <el-table-column label="磁盘读 / 写" prop="BlockIO" />
      <el-table-column label="网络：发送 / 接收" prop="NetIO" />
      <el-table-column label="容器进程数量" prop="PIDs" />
      <el-table-column align="center" label="操作">
        <template v-slot="scope">
          <div style="display: flex;justify-content: space-around;">
            <el-button type="danger" size="small" @click="stop(scope.row)">停止容器</el-button>
            <template v-if="user_id === scope.row.captain_id">
              <el-button type="success" size="small" @click="run(scope.row)">恢复容器</el-button>
            </template>
          </div>
        </template>
      </el-table-column>
    </el-table>
    <!-- 分页器 -->
    <el-row style="width: 100%; align-items: center;justify-content: center;margin-top: 20px;">
      <el-pagination v-model:current-page="currentPage" v-model:page-size="pageSize" :page-sizes="[10, 20, 30]"
        :total="total" layout="total, sizes, prev, pager, next, jumper" @size-change="handleSizeChange"
        @current-change="handleCurrentChange" />
    </el-row>
  </el-card>
</template>

<script lang="js" setup>

import { ref, onMounted, reactive } from "vue";
import { ElMessage, ElMessageBox, ElNotification } from "element-plus";
import axios from 'axios'

const currentPage = ref(1)
const pageSize = ref(10)
//记录请求返回数据的集合
const msg = ref([]);

//用于暂存当前页的数据
const tableData = ref([])
tableData.value = msg.value

let total = ref(tableData.value.length)
let user_id
let loading = ref(false)

// 获取所有的数据
function getData() {
  axios.get('admin/containers')
    .then(response => {
      // 请求成功的处理
      // 把数据传给 msg 数组
      msg.value = response.containers;
      console.log("msg.value:", msg.value);
      // 获取数据的总条数
      if (msg && msg.value && msg.value.length) {
        total.value = msg.value.length;
      } else {
        total.value = 0;
      }
      // 获取当前页的数据
      getPageData();
      ElMessage({
        message: '获取数据成功',
        type: 'success'
      });
    })
    .catch(err => {
      // 请求失败的处理
      console.error(err);
    });
}



//获取当前页的数据
function getPageData() {
  //先把当前页面的数据清空
  tableData.value = []
  //获取当前页面的数据
  for (let i = (currentPage.value - 1) * pageSize.value; i < total.value; i++) {
    //遍历数据添加到tableData中
    tableData.value.push(msg.value[i])
    // console.log(msg.value[i])
    // console.log(tableData.value[i])
    //判断是否达到一页的要求
    if (tableData.value.length === pageSize.value) break
  }
}

//分页时修改每一页所展示的数据量
const handleSizeChange = (val) => {
  //修改当前每一页的数据条数
  pageSize.value = val
  //数据重新分页
  getPageData()
  console.log(`${val} items per page`)
}

//调整当前页的页码
const handleCurrentChange = (val) => {
  //修改当前页的页码
  currentPage.value = val
  //数据重新分页
  getPageData()
  console.log(`current page: ${val}`)
}

//停止容器
function stop(row) {
  console.log("停止容器", row.ID)
  //弹出提示框
  ElMessageBox.confirm('是否停止该容器？', '提示', {
    confirmButtonText: '确定',
    cancelButtonText: '取消',
    type: 'warning'
  }).then(() => {
    //请求停止容器的接口
    axios.put('admin/stopContainer',
      {
        container_name: row.Name,
        team_address: row.TeamAddress,
      })
      .then(response => {
        // 请求成功的处理
        if (response.code === 1) {
          ElMessage({
            message: '停止容器成功',
            type: 'success'
          });
          getData()
        } else {
          ElMessage({
            message: response.message,
            type: 'error'
          });
        }
      })
      .catch(err => {
        // 请求失败的处理
        console.error(err);
      });
  }).catch(() => {
    ElMessage({
      type: 'info',
      message: '已取消操作'
    });
  });
}

//恢复容器
function run(row) {
  console.log("恢复容器", row.ID)
  //弹出提示框
  ElMessageBox.confirm('是否恢复该容器？', '提示', {
    confirmButtonText: '确定',
    cancelButtonText: '取消',
    type: 'warning'
  }).then(() => {
    //请求恢复容器的接口
    axios.put('admin/startContainer',
      {
        container_name: row.Name,
        team_address: row.TeamAddress,
      })
      .then(response => {
        // 请求成功的处理
        if (response.code === 1) {
          ElMessage({
            message: '恢复容器成功',
            type: 'success'
          });
          getData()
        } else {
          ElMessage({
            message: response.message,
            type: 'error'
          });
        }
      })
      .catch(err => {
        // 请求失败的处理
        console.error(err);
      });
  }).catch(() => {
    ElMessage({
      type: 'info',
      message: '已取消操作'
    });
  });
}



onMounted(() => {

  getData()

})


</script>

<script lang="js">
export default {
  name: 'UserProjectManagement',
};

</script>

<style scoped>
.items-center {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.between {
  display: flex;
  align-items: start;
  justify-content: space-between;
}
</style>